<!--集中式房源编辑表单-->
<template>
	<a-tabs v-model:activeKey="activeTab" v-bind="options">
		<a-tab-pane key="basic" tab="基础信息">
			<house-centralized-base-form :value="community" @next="nextStep" @update="updateData" />
		</a-tab-pane>
		<a-tab-pane key="rooms" tab="房间配置" :disabled="!value.id">
			<house-centralized-rooms-form :value="community" @next="activeTab = 'extra'" />
		</a-tab-pane>
		<a-tab-pane key="extra" tab="推广信息" :disabled="!value.id">
			<house-centralized-extra-form :value="community" />
		</a-tab-pane>
	</a-tabs>
</template>

<script lang="ts" setup>
	import {reactive, ref} from 'vue'
	import {Community} from '@/interface/community'
	import HouseCentralizedBaseForm from '@/components/house/edit/centralized/house-centralized-base-form.vue'
	import HouseCentralizedRoomsForm from '@/components/house/edit/centralized/house-centralized-rooms-form.vue'
	import HouseCentralizedExtraForm from '@/components/house/edit/centralized/house-centralized-extra-form.vue'

	const props = defineProps<{
		value: Community
	}>()
	const community = ref<Community>(props.value)
	const activeTab = ref('basic')
	const nextStep = (value)=>{
		activeTab.value = 'rooms'
		community.value = value
	}
	const updateData = (value)=>{
		community.value = value
	}
	const options = reactive({
		tabPosition: 'left',
		class: 'house-form-tabs',
		destroyInactiveTabPane: true
	})

</script>

<style lang="less" scoped>
	.house-form-tabs {
		.ant-tabs-tabpane {
			padding: 0 24px;
			min-width: 1000px;
		}
	}
</style>
